<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的代理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">

    <link rel="stylesheet" href="/sui/css/sm.min.css">
    <link rel="stylesheet" href="/sui/css/sm-extend.min.css">

    <!--    引用阿里图标库-->


</head>
<body>

<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page page-current">
        <!-- 标题栏 -->
        <header class="bar bar-nav">
            <a  href="/index" class="external button button-link button-nav pull-left">
                <span class="icon icon-left"></span>
                返回
            </a>
            <button class="button pull-right open-add-agent">
                添加
            </button>

        </header>

        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="100" data-ptr-distance="55">
            <!-- 默认的下拉刷新层 -->
            <div class="face_query query_input">
                <!--搜索开始-->
                <div class="bar bar-header-secondary">
                    <div class="searchbar">
                        <a class="searchbar-cancel query_input_val">查询</a>
                        <div class="search-input">
                            <label class="icon icon-search" for="search"></label>
                            <input type="text" face_param_name="userName"  placeholder='请输入查询名字' class="inputVal face_query_input"/>
                        </div>
                    </div>
                </div>
                <!-- 搜索结束-->
            </div>


            <div class="pull-to-refresh-layer" >
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div class="space_tip"></div>

            <div class="list-block cards-list" >
                <ul>

                </ul>
            </div>

            <div class="list-block ">
                <div class="no-data" style="display: none;height:calc(100vh - 10.0867rem);overflow: hidden">
                    <div class="no-record"></div>
                    <div class="wenzi">
                        <span>当前暂无记录</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="infinite-scroll-preloader"  style="display:none">
            <div class="preloader"></div>
        </div>
    </div>
    <div class="popup popup-about" style="background: #f0f0f3">
        <div class="content-block" style="padding: 0;margin:0">
            <!--点击添加开始-->
            <div class="close-popup">
                <i style="display:inline-block;width:25px;height:25px;background-image: url(/image/guanbi.svg);background-position: center center;background-size: 25px 25px;margin: 0 0.5rem;vertical-align: middle;padding: 0.3rem 0"></i>
            </div>
            <form class="face_agent_add">
                <div class="face_agent_add_conter">
                    <div class="face_agent_add_user">
                        <label>用户名</label>
                        <input type="text" name="userName" placeholder="请输入用户名"/>
                    </div>
                    <div class="face_agent_add_phone">
                        <label>手机号</label>
                        <input type="text" name="mobile" placeholder="请输入手机号码"/>
                    </div>
                    <div class="face_select">
                        <label>等级</label>
                        <input type="hidden" name="type" class="face_select_input" />
                        <span class="face_select_ul_display" style="display: inline-block; margin-left: 2rem;width: 65%"></span>
                        <i class="iconfont icon-f11"></i>
                        <ul class="face_select_ul" name="levelId" style="display: none">

                        </ul>
                    </div>
                </div>
            </form>
            <div class="face_agent_add_but">
                <span class="face_agent_add_but_reset">重置</span>
                <span class="face_agent_add_but_submit">立即提交</span>
            </div>
            <!-- 点击添加结束-->
        </div>
    </div>
</div>
<link href="/css/iconfont.css" type="text/css" rel="stylesheet"/>
<link href="/css/face/face_query.css" type="text/css" rel="stylesheet"/>
<link href="/css/agency/user/userList.css" type="text/css" rel="stylesheet"/>
<script src="/js/util/dateFormat.js"></script>
<script type='text/javascript' src='/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/sui/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/sui/js/sm-extend.min.js' charset='utf-8'></script>
<script>

    var falg=true;

    var pageNo=1;

    var pageSize=10;
    // 上次加载的序号
    var lastIndex = 0;
    // 加载flag
    var loading = false;

    //最大加载数量
    var maxItems=0;

    var removeFlag=false;


    var startTime = new Date().Format("yyyy-MM-dd");


    $("#start_time").val(startTime);

    $("#start_time").calendar({
        value: [startTime]
    });
    $("#end-time").calendar({

    });


    $.initPullToRefresh(".pull-to-refresh-content");

    $(document).on('refresh', '.pull-to-refresh-content',function(e) {

        if (loading) {
            return;
        }
        // 设置flag
        loading = true;



        setTimeout(function () {
            init_datalist();
        },500);

    });

    function init_datalist() {
        pageNo=1;
        $('.cards-list .card').remove();
        addItems(1,pageSize);
        $.pullToRefreshDone('.pull-to-refresh-content');
    }
    //刷新页面
    function refreshPage(pageNo, pageSize){
        addItems(pageNo, pageSize);
    }
    function addItems(pageNo, pageSize) {
        var  param =  getQueryParam();
        param["pageNo"]=pageNo,
            param["pageSize"]=pageSize;
        // 生成新条目的HTML
        if(falg){
            falg=false;
            $.ajax({
                "url": "/agency_user/queryData",
                "type": "POST",
                async:false,
                data:param,
                success:function (result) {
                    falg=true;
                    maxItems=result.recordsTotal;

                    var data=result.data;

                    if(data.length==0){

                        $(".no-data").css('display','block');
                        return;
                    }else{
                        $(".no-data").css('display','none');
                    }
                    for(var i=0;i<data.length;i++) {
                        var agencyInfo =data[i];

                        var html = '';

                        html+= '<li class="card">' +
                            '<div class="card-header">'+
                            '<i class="iconfont icon-yonghu" style="font-size: 1.5rem"></i>'+
                            '<span style="vertical-align: middle;color:#0894ec">'+
                            agencyInfo.userName+
                            '</span>'+
                            '</div>' +
                            '<div class="card-content">' +
                            '<div class="item-content">'+
                            '<div class="item-media">'+
                            '<img src="/image/mobile.svg" width="44" style="margin-left: -0.3rem">'+
                            '</div>'+
                            '<div class="item-inner">'+
                            '<div class="item-title-row">'+
                            '<div class="item-title">'+agencyInfo.mobile+'</div>'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '</div>' +
                            '<div class="card-footer">'+
                            '<span>'+agencyInfo.agencyLevel.name+'</span>'+
                            '<span>'+'注册时间:'+agencyInfo.createdTime+'</span>' +
                            '</div>' +
                            '</li>';

                        $('.cards-list ul').append(html);
                    }
                    lastIndex = $('.cards-list .card').length;
                    removeFlag=false;
                    loading = false;
                }
            })
        }
        // 获取代理级数结束
    }
    // 注册'infinite'事件处理函数
    $(document).on('infinite', '.infinite-scroll-bottom',function(e) {
        // 如果正在加载，则退出
        if (loading) {
            return;
        }
        // 设置flag
        loading = true;
        if (lastIndex >= maxItems) {

            if (maxItems != 0) {
                $('.infinite-scroll-preloader').hide();
                setTimeout(function () {
                    loading = false;
                    $.toast("已经到底了");
                }, 500)
            }
            return;
        }
        pageNo++;
        $('.infinite-scroll-preloader').show();
        setTimeout(function () {
            refreshPage(pageNo,pageSize);
            $('.infinite-scroll-preloader').hide();
            $.refreshScroller();
        },500)
    });

    $(document).ready(function () {
        // 点击选择代理
        $('.face_select_ul_display').on('click',function () {
            $('.face_select_ul').toggle();
        });
        // 点击查找开始
        $('.query_input_val').on('click',function () {
            init_datalist();
            $('.inputVal').val('');
        });
        // 点击查找结束
        // 点击添加开始
        $('.face_agent_add_but_reset').on('click',function () {
            $(".face_agent_add_user input").val('');
            $(".face_agent_add_phone input").val('');
        });
        // 点击提交
        $('.face_agent_add_but_submit').on('click',function () {
            var userName= $(".face_agent_add_user input[name='userName']").val();
            var mobile=$(".face_agent_add_phone input[name='mobile']").val();
            var level=$(".face_select_input").val();
            if(userName==null || userName==undefined || userName==""){
                $.alert('请输入用户名');
                return;
            }
            if(mobile==null || mobile==undefined || mobile==""){
                $.alert('请输入手机号');
                return;
            }
            // 判断手机号是否正确
            var phone = $('.face_agent_add_phone input').val();
            if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(phone)){
                var params={levelId:level,userName:userName,mobile:mobile};
                $.post('/agency_user/edit',params,function (result) {
                    if(result.code==1){
                        $.alert('添加成功');
                        $(".face_agent_add").hide();
                        window.location.href='/agency_user/list';
                    }else{
                        $.alert(result.message);
                    }
                });
            }else {
                $.alert("请输入正确的手机号格式");
            }

        });
        //点击添加结束
        refreshPage(pageNo,pageSize);
    });


    $(document).on('click','.open-add-agent', function () {
        $(".face_agent_add_user input").val('');
        $(".face_agent_add_phone input").val('');
        // 获取代理级数开始
        $('.face_select_ul li').remove();
        $('.face_select .face_select_ul_display').html("");

        $.ajax({
            "url": "/agency_level/queryData",
            "type": "POST",
            async:false,
            success:function (result) {
                var data=result.data;
                for(var i=0;i<data.length;i++) {
                    var gradeData = data[i];
                    if(i==0){
                        $('.face_select .face_select_ul_display').html(gradeData.name);
                        ;;       $(".face_select .face_select_input").val(gradeData.id);
                    }

                    var face_select_li= $('<li  option_value='+gradeData.id+'>'+gradeData.name+'</li>');
                    face_select_li.click(function () {
                        $('.face_select_ul').hide();
                        var option_value= $(this).attr("option_value");
                        $(".face_select .face_select_input").val(option_value);
                        $('.face_select .face_select_ul_display').html($(this).html());
                    });
                    $('.face_select_ul').append(face_select_li);
                }
            }
        });
        $.popup('.popup-about');
    });
    /**
     * 获取查询参数
     */
    function  getQueryParam() {

        var param = {};

        $(".face_query .face_query_input").each(function () {

            var query_input = $(this);

            var param_name = query_input.attr("face_param_name");
            var param_value =query_input.val();

            param[param_name]=param_value;
        });


        return param;
    }
    $.init();
</script>

</div>




</body>
</html>
